@charset "utf-8";
.web10{
    position: absolute;
    top: 0;
    background: #f3f4f6;
    width: 100%;
    bottom: 0;
//  height: 100%;
    transform: translateX(-100%);
    transition: all 1s;
    header{
        display: flex;
        align-items: center;
        background: #f7f7f7;
        padding-top: 10px;
        padding-bottom: 10px;
        position: relative;
        border-bottom: 1px solid #c1c1c1;
        i{
             font-size: 20px;
            position: absolute;
            left: 10px;
            color: #999999;
        }
        span{
             font-size: 20px;
            flex-grow: 1;
            text-align: center;
        }
    }
    section{
        padding-top: 15px;
        .amount_box{
            background: #fff;
            padding-left: 10px;
            border-bottom: 1px solid #e1e2e4;
            border-top: 1px solid #e1e2e4;
            .deposit_amount{
                padding-top: 10px;
                padding-bottom: 10px;
                font-size: 17px;
                border-bottom: 1px solid #e1e2e4;
                &:last-child{
                    border-bottom: none;
                }
                span{
                    color: #333;
                    margin-right: 15px;
                }
                input{
                    border: none;
                    width: 50%;
                }
                input[type="number"]{
                     &::-webkit-input-placeholder {
                            color: #e1e1e1;
                            font-size: 16px;
                        }
                }
            }
        }
        .account_box{
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #fff;
            border-top: 1px solid #e3e3e3;
            border-bottom: 1px solid #e3e3e3;
            margin-top: 15px;
            padding-top: 10px;
            padding-bottom: 10px;
            padding-left: 15px;
            padding-right: 5px;
            .account_con{
                font-size: 17px;
            }
            .choose_con{
                font-size: 18px;
            }
        }
        .now_box{
            width: 87.5%;
            margin: 0 auto;
            text-align: center;
            background: #cc3333;
            border-radius: 6px;
            color: #fff;
            padding-top: 10px;
            padding-bottom: 10px;
            font-size: 18px;
            margin-top: 20px;
        }
        .draw_rule{
            width: 87.5%;
            margin: 0 auto;
            color: #999999;
            font-size: 14px;
            margin-top: 15px;
            span{
                color: #153fc6;
            }
        }
        .success_box{
            position: absolute;
            top: 32%;
            left: 29%;
            width: 44%;
            background: rgba(0,0,0,.75);
            color: #d6d6d6;
            text-align: center;
            border-radius: 16px;
            padding-bottom: 10px;
            padding-top: 5px;
            display: none;
            i{
                font-size: 35px;
            }
            p{
                font-size: 18px;
            }
        }
    }
    .confirm_box{
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
        background: rgba(0,0,0,.65);
        transform: translateX(-100%);
        transition: all 1s; 
        .confirm{
            background: #f8f8f8;
            width: 85%;
            border-radius: 18px;
            padding-top: 20px;
            padding-bottom: 20px;
            position: absolute;
            top: 33%;
            left: 7%;
            padding-left: 15px;
            padding-right: 15px;
            .confirm_top{
                text-align: center;
                border-bottom: 1px solid #dcdcdc;
                padding-bottom: 10px;
                .confirm_title{
                    font-size: 16px;
                    font-weight: bold;
                    margin-bottom: 5px;
                }
                .confirm_con{
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    color: #959595;
                    font-size: 12px;
                }
            }
            .confirm_bottom{
                display: flex;
                justify-content: space-around;
                align-items: center;
                margin-top: 10px;
                .bot_btn{
                    width: 44%;
                    text-align: center;
                    background: #ffffff;
                    border-radius: 4px;
                    border: 1px solid #b7b7b7;
                    padding-top: 10px;
                    padding-bottom: 10px;
                }
                .active{
                    background: #cc3333;
                    border: 1px solid #cc3333;
                    color: #fff;
                }
            }
        }
    }
        .select_box{
        position: absolute;
        top: 0;
        bottom: 0;
        background: rgba(0,0,0,.65);
        width: 100%;
        transform: translateX(-100%);
        transition: all 1s;    
        .select{
            width: 100%;
            position: absolute;
            bottom: 0;
            text-align: center;
            background: #e8e9eb;
            .wallet{
                font-size: 16px;
                background: #fff;
                padding-top: 15px;
                padding-bottom: 15px;
                border-bottom: 1px solid #e0e0e0;
                color: #666666;
                &:last-child{
                    border: none;
                }
            }
            .active{
                color: #d62d31;
            }
            .abolish{
                text-align: center;
                font-size: 16px;
                background: #fff;
                padding-top: 15px;
                padding-bottom: 15px;
                margin-top: 15px;
                border-bottom: 1px solid #e0e0e0;
                border-top: 1px solid #e0e0e0;
            }
        } 
    }
}



.web11{
    position: absolute;
    top: 0;
    background: #f3f4f6;
    width: 100%;
    bottom: 0;
//  height: 100%;
    transform: translateX(-100%);
    transition: all 1s;
    header{
        display: flex;
        align-items: center;
        background: #f7f7f7;
        padding-top: 10px;
        padding-bottom: 10px;
        position: relative;
        border-bottom: 1px solid #c1c1c1;
        i{
            font-size: 20px;
            position: absolute;
            left: 10px;
            color: #999999;
        }
        span{
             font-size: 20px;
            flex-grow: 1;
            text-align: center;
        }
    }
    section{
        padding-top: 15px;
        .message_box{
            background: #fff;
            border-bottom: 1px solid #e1e2e4;
            border-top: 1px solid #e1e2e4;
            padding-left: 10px;
            .message_list{
                font-size: 16px;
                border-bottom: 1px solid #e1e2e4 ;
                padding-left: 5px;
                padding-top: 10px;
                padding-bottom: 10px;
                &:last-child{
                    border-bottom: none;
                }
                span{
                    width: 30%;
                    display: inline-block;
                }
                input{
                    border: none;
                     &::-webkit-input-placeholder {
                            color: #e1e1e1;
                        }
                }
            }
        }
        .phone_box{
            background: #fff;
            margin-top: 15px;
            padding-left: 10px;
            .phone_list{
                border-bottom: 1px solid #e1e2e4;
                padding-left: 5px;
                padding-top: 10px;
                padding-bottom: 10px;
                padding-right: 10px;
                font-size: 16px;
                span{
                    display: inline-block;
                    width: 30%;
                }
                input{
                    display: inline-block;
                    border: none;
                    width: 39%;
                }
                p{
                    display: inline-block;
                    color: #113cc6;
                }
            }
            .phone_item{
                font-size: 16px;
                padding-left: 5px;
                padding-top: 10px;
                padding-bottom: 10px;
                span{
                    width: 30%;
                    display: inline-block;
                }
                input{
                    border: none;
                     &::-webkit-input-placeholder {
                            color: #e1e1e1;
                        }
                }
            }
        }
        .achieve_box{
            width: 87.5%;
            margin: 0 auto;
            text-align: center;
            margin-top: 20px;
            color: #fff;
            background: #cc3333;
            border-radius: 6px;
            padding-top: 10px;
            padding-bottom: 10px;
        }
    }
}



.web12{
    position: absolute;
    top: 0;
    background: #f3f4f6;
    width: 100%;
    bottom: 0;
//  height: 100%;
    transform: translateX(-100%);
    transition: all 1s;
    header{
        display: flex;
        align-items: center;
        background: #f7f7f7;
        padding-top: 10px;
        padding-bottom: 10px;
        position: relative;
        border-bottom: 1px solid #c1c1c1;
        i{
             font-size: 20px;
            position: absolute;
            left: 10px;
            color: #999999;
        }
        span{
             font-size: 20px;
            flex-grow: 1;
            text-align: center;
        }
    }
    section{
        padding-top: 15px;
        .impower_box{
            display: flex;
            justify-content: flex-start;
            align-items: center;
            padding-left: 15px;
            background: #fff;
            padding-top: 10px;
            padding-bottom: 10px;
            font-size: 16px;
            border-top: 1px solid #e1e2e4;
            border-bottom: 1px solid #e1e2e4;
            span{
                width: 30%;
                display: block;
            }
        }
        .phone_box{
            background: #fff;
            margin-top: 15px;
            padding-left: 10px;
            .phone_list{
                border-bottom: 1px solid #e1e2e4;
                padding-left: 5px;
                padding-top: 10px;
                padding-bottom: 10px;
                padding-right: 10px;
                font-size: 16px;
                span{
                    display: inline-block;
                    width: 30%;
                }
                input{
                    display: inline-block;
                    border: none;
                    width: 39%;
                }
                p{
                    display: inline-block;
                    color: #113cc6;
                }
            }
            .phone_item{
                font-size: 16px;
                padding-left: 5px;
                padding-top: 10px;
                padding-bottom: 10px;
                span{
                    width: 30%;
                    display: inline-block;
                }
                input{
                    border: none;
                     &::-webkit-input-placeholder {
                            color: #e1e1e1;
                        }
                }
            }
        }
        .achieve_box{
            width: 87.5%;
            margin: 0 auto;
            text-align: center;
            margin-top: 20px;
            color: #fff;
            background: #cc3333;
            border-radius: 6px;
            padding-top: 10px;
            padding-bottom: 10px;
        }
    }
}


.web13{
    position: absolute;
    top: 0;
    background: #f3f4f6;
    width: 100%;
    bottom: 0;
//  height: 100%;
    transform: translateX(-100%);
    transition: all 1s;
    header{
        display: flex;
        align-items: center;
        background: #f7f7f7;
        padding-top: 10px;
        padding-bottom: 10px;
        position: relative;
        border-bottom: 1px solid #c1c1c1;
        i{
             font-size: 20px;
            position: absolute;
            left: 10px;
            color: #999999;
        }
        span{
             font-size: 20px;
            flex-grow: 1;
            text-align: center;
        }
    }
    section{
        .choose_box{
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 16px;
            border-top: 1px solid #e1e2e4;
            border-bottom: 1px solid #e1e2e4;
            background: #fff;
            padding: 15px 15px;
            margin-top: 15px;
            .chse{
                display: flex;
                justify-content: flex-start;
                align-items: center;
                p{
                    padding-right: 5px;
                }
            }
        }
    }
}


